<template>
  <div>
    <el-dialog title="新增文章" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="文章题目">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="文章类型" label-width="80px">
          <el-select v-model="form.kind" placeholder="请选择文章类型">
            <el-option v-for="k in Kinds" :label="k.name" :value="k.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章描述" label-width="80px" placeholder="可为空">
          <el-input v-model="form.summary"></el-input>
        </el-form-item>
        <el-form-item label="文章封面" label-width="80px">
          <el-upload
              class="upload-demo"
              action="https://copyctrl.top:8089/file/dynamic"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="getPath"
              :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="文章配图" label-width="80px">
          <el-upload
              class="upload-demo"
              action="https://copyctrl.top:8089/file/dynamic"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="getPath2"
              :file-list="fileList2">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="文章内容">
          <el-input type="textarea" v-model="form.body"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false,form={}">取 消</el-button>
        <el-button type="primary" @click="send">确 定</el-button>
      </div>
    </el-dialog>
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" router>
          <el-menu-item index="1" route="/allPassages">所有文章</el-menu-item>
          <el-menu-item index="2" route="/">热点文章</el-menu-item>
          <el-button type="primary" style="margin-left:800px" @click="show" size="mini">新增文章</el-button>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import axios from "axios";

export default {
  name: "passages",
  // eslint-disable-next-line vue/no-unused-components
  data() {
    return {
      activeIndex: '1',
      Kinds: [{
        id: 0,
        name: "全部"
      }],
      dialogFormVisible:false,
      form: {
      },
      fileList: [],
      fileList2: []
    };
  },
  methods: {
    getPath(response, file, fileList) {
      this.form.pic = response.data
      console.log(this.form)
    },
    getPath2(response, file, fileList) {
      this.form.picBody = response.data
      console.log(this.form)
    },
    handleExceed(files, fileList) {
      console.log(fileList)
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    show() {
      console.log('ok')
      this.dialogFormVisible = true
    },
    handleSelect(key, keyPath) {
    },
    getKind() {
      axios.get(`/api/admin/passage/kind/all`).then(
          response => {
            if (response.data.code == 200) {
              this.Kinds = response.data.data
              console.log(this.Kinds)
            } else {
              this.$message.error('服务繁忙');
            }
          },
          error => {
            this.$message.error('服务繁忙');
            //请求失败
          }
      )
    },
    send() {
      const passage = JSON.stringify({
        title: this.form.title,
        body: this.form.body,
        kind:this.form.kind,
        pic:this.form.pic,
        picBody:this.form.picBody,
        summary:this.form.summary
      });
      axios.post(`/api/admin/passage`,{"passage":passage}).then(
          response => {
            if (response.data.code==200) {
              this.$message({
                message: '新增成功',
                type: 'success'
              });
              this.dialogFormVisible = false
              this.form = {
                title: '',
                body: ''
              }
              this.$router.go(0)
              location.reload()
            } else {
              this.$message.error(response.data.errorMsg);
            }
          },
          error => {
            //请求失败
            this.$message.error('服务繁忙');
          }
      )
    }
  },
  mounted() {
    this.getKind()
  }
}
</script>

<style scoped>

.el-header {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 60px;
}
</style>
